<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option"/>
    <el-dialog :visible.sync="spotDialogShowed" title="景点管理" width="1000px">
      <project-spot ref="table" :project-id="projectId"/>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import {projectApi} from '@/feature/mj/infra/api/projectApi'
import CURDTable from '@/framework/components/table/CURDTable'
import ProjectSpot from "@/feature/mj/app/project-spot";

export default {
  components: {ProjectSpot, CURDTable},
  data() {
    return {
      spotDialogShowed: false,
      projectId: 0,
      option: {
        requestApi: projectApi,
        showSelection: false,
        columns: [
          {
            label: '封面',
            width: 100,
            required: true,
            prop: 'cover',
            type: ColumnType.IMAGE
          },
          {
            label: '项目名称',
            searchable: true,
            required: true,
            prop: 'name'
          },
          {
            label: '排序',
            width: 80,
            required: true,
            prop: 'sortNum',
            defaultValue: 0
          },
          {
            label: '描述',
            prop: 'intro',
            width: 'auto',
            required: true,
            span: 24,
            type: ColumnType.TEXT
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  methods: {
    handleSpotManager({arg: row}) {
      this.currentRow = row
      this.spotDialogShowed = true
      this.projectId = row.id
      this.$nextTick(() => {
        this.$refs.table.refresh()
      })
    }
  }
}
</script>

